/* Copyright (c) 2013 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* Globals ********************************************************************/
html {
  height: 100%
}

body {
  cursor: default;
  margin: 0px;
  padding: 0px 4px 4px;
  overflow:hidden;
  height: 100%;
}

.section {
  overflow:hidden;
  margin:14px 0 12px 0;
}

.subsection {
  margin:2px;
  padding:3px;
  border:1px solid lightgrey;
}

h1 {
  /* White with a vertically centered one pixel horizontal black line. */
  background: -webkit-linear-gradient(white, white 59%,
                                      black 60%, black 64%,
                                      white 65%, white);
  font: normal 16px 'Arimo', 'Gill Sans', 'Open Sans',
                    'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  margin: 0 0 8px 0;
  text-align: center;
}

h1 span {
  background: white;
  padding: 0 4px;
}

button.borderless {
  background-color: white;
  border:1px solid rgba(0,0,0,0.1);
  margin: 3px;
  padding: 3px;
}

button.borderless:hover {
  border:1px solid rgba(0,0,0,1);
}

button.borderless:hover[disabled] {
  border:1px solid rgba(0,0,0,0.1);
}

/* Template section (invisible) ***********************************************/

#templates {
  display: none;
}

/* Priority section ***********************************************************/

#priority {
  font-size: 0;  /* To collapse the spaces between buttons. */
  text-align: center;
}

button.priority {
  font: normal 14px 'Arimo', 'Gill Sans', 'Open Sans',
                    'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  height: 24px;
  width: 48px;
}

/* Recorder *******************************************************************/
#recording-status {
  font-size:18pt;
  text-align: center;
}

#recording-stats {
  font-size:9pt;
  text-align: center;
}

button.control img {
  display: block;
  margin: 0;
  padding: 0;
}

button.control[disabled="true"] {
  opacity: 0.2;
}

/* Notification sections ******************************************************/

button.notification img  {
  display: block;
  height: 40px;
  margin: 0;
  padding: 0;
  width: 40px;
}

/* Events section *************************************************************/

#events {
  margin:0;
  font-weight: lighter;
  padding: 0;
  height:180px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: gold;
}

.event {
  color: gray;
  font: 11px 'Arimo', 'Gill Sans', 'Open Sans',
             'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

.error {
  color: red;
  font: bold 16px 'Arimo', 'Gill Sans', 'Open Sans',
             'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  text-align: center;
}

/* Highlighting ***************************************************************/
body[data-priority="-2"] button.priority[data-priority="-2"],
body[data-priority="-1"] button.priority[data-priority="-1"],
body[data-priority="0"] button.priority[data-priority="0"],
body[data-priority="1"] button.priority[data-priority="1"],
body[data-priority="2"] button.priority[data-priority="2"] {
  background: rgb(255, 255, 85);
  -webkit-box-shadow: inset 3px 3px 0 white, inset -3px -3px 0 white;
}
